
// @ts-ignore

import { ProFormRadio } from "@ant-design/pro-form"
import { Radio, Tooltip } from "antd"
import { useEffect } from "react"
const style = [
    {
        name: '停车场',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/aa746a091a284e499466382426020648停车场.svg'
    },
    {
        name: '厕所',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/72e47e70a5da4869852f781eac5b3d62公共厕所.svg'
    },
    {
        name: '农家乐',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/f079d91e1dc14f8a99f934e1e04c6e0e农家乐.svg'
    },
    {
        name: '观光体验区',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/9e3614559db848cbbab6509e8a912225农村观光体验区.svg'
    },
    {
        name: '古树',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/7419b2a164f8436280cdf0b57234e5b4千年古树.svg'
    },
    {
        name: '古树群',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/4c4d264688c2458ebf3add3b2b0f6795古树群.svg'
    },
    {
        name: '博物馆',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/63f4d2299656483c8aa3a5a1caaa04b7博物馆.svg'
    },
    {
        name: '学校',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/0f8b1a0552074a6abff916c6e86ec456学校.svg'
    },
    {
        name: '卫生室',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/25534d132bb745bdaf01a07bc5138b5b卫生室.svg'
    },
    {
        name: '古井',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/d3cdc61719ed48b6b76bee2bc6763690古井.svg'
    },
    {
        name: '寨门',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/a59280e07db24b1fa0fbe5253c9550b2寨门.svg'
    },
    {
        name: '岔路',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/e1ecad6f9d08478ca6c02b738fd87332岔路.svg'
    },
    {
        name: '服务中心',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/c0559dde3def440c9ef447808bab7c13旅客服务中心.svg'
    },
    {
        name: '村委',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/05035dbdca484b38a29e95d42fae207e村委.svg'
    },
    {
        name: '梯田',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/e697ccb39001465da3e8a7084c7319ed梯田.svg'
    },
    {
        name: '民宿',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/e74d8b8e8699432eb8ad491854f2b353民宿.svg'
    },
    {
        name: '水碾房',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/1754a3a583a44a638bbbe662b3052d2e水碾房.svg'
    },
    {
        name: '田园观光',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/d4a6b14c8135461dbe936516641ebbb0田园观光.svg'
    },
    {
        name: '广场',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/f2c4d50fefc3476d8d5e66052fd23ddc芦笙场.svg'
    },
    {
        name: '茶叶基地',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/2b5f9c696d89494297cf4f51e78c4580茶叶基地.svg'
    },
    {
        name: '观景亭',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/6d7023a28ab94219bf45f0fabfcab424观景亭.svg'
    },
    {
        name: '作坊',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/2862559f0b2d4cf5a2e288339b46b264银饰作坊.svg'
    },
    {
        name: '风雨桥',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/c07ee815511843eabab94f1f1b17d0c3风雨桥.svg'
    },
    {
        name: '鼓藏头',
        url: 'https://jd-kxwh.oss-cn-beijing.aliyuncs.com/default/2023-11-22/947402b28b3844c7a3c1a6cb297d36f1鼓藏头.svg'
    },

]

const IconRadio: React.FC<{ name: string, label: string, form: any, value?: any }> = ({ name, label, form, value }) => {

    useEffect(() => {
        if (value) {
            form?.current?.setFieldValue(name, value)
        }
    }, [value])
    return <>
        <ProFormRadio.Group
            name={name}
            label={label}
            radioType="button"
            rules={[
                {
                    required: true,
                },
            ]}
            fieldProps={{
                value: value
            }}
        >
            <Radio.Group onChange={(e) => {
                form?.current?.setFieldValue(name, e.target.value)
            }}>
                {
                    style.map((item) => {
                        return <Tooltip key={item.url} placement="top" title={
                            <img style={{ width: 60 + 'px', height: 60 + 'px' }} src={item.url} />
                        } >
                            <Radio.Button value={item.url} onClick={() => {
                                form?.current?.setFieldValue(name, item.url)
                            }} style={{ marginTop: 16 }}> {item.name}</Radio.Button>
                        </Tooltip>
                    })
                }
            </Radio.Group>
        </ProFormRadio.Group>
    </>
}

export default IconRadio